<template>
  <el-main style="height: 100%;">
        <div style="width: 700px;padding: 10px 10px; display: flex;">
          <el-input v-model="filename" placeholder="请输入文件名称" suffix-icon="el-icon-search" style="margin-right: 10px;"></el-input>
          <el-input v-model="type" placeholder="请输入文件类型" suffix-icon="el-icon-message" style="margin-right: 10px;"></el-input>
          <el-button @click="search(this)">搜索</el-button>
          <el-button type="warning" @click="reset(this)">重置</el-button>
        </div>
         
        <div style="width: 700px;padding: 10px 10px; display: flex;">
        <el-upload action="http://localhost:8081/file/upload"
          :limit="1"
          :show-file-list="false"
          @on-success="handleSuccess()"
          :name="'multipartFile'"
          >
          <el-button type="primary">文件上传 <i class="el-icon-circle-plus-outline"></i></el-button>
        </el-upload>
          <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </div>
        <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" ></el-table-column>
          <el-table-column prop="name" label="文件姓名" ></el-table-column>
          <el-table-column prop="type" label="文件类型" ></el-table-column>
          <el-table-column prop="size" label="文件大小(B)"></el-table-column>
          <el-table-column prop="url" label="文件下载">
            <template scope="scope">
              <el-button type="primary" round @click="handledownLoad(scope.row.url)">下载</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="isDelete" label="是否已删除">
            <template scope="scope">
                <p>{{ scope.row.isDelete }}</p>
            </template>
          </el-table-column>
          <el-table-column prop="enable" label="是否启用">
            <template scope="scop">
                <el-switch
                    v-model="scop.row.enable"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                </el-switch>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="pages"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


</el-main>
</template>
<script>
import {loadMEssage,loadsearch} from "@/api/file"
export default {
    data() {
    return {
      pages:[4,6,8,10],
      tableData: null,
      total:0,
      pageIndex:1,
      pageSize:4,
      filename:"",
      type:"",
      multipleSelection:[]
    }
  },
  created(){
    this.load()
  },
  methods:{
    handleSizeChange(changeSize){
      console.log(changeSize)
      this.pageSize=changeSize
      this.load()
    },
    handleCurrentChange(chageIndex){
      console.log(chageIndex)
      this.pageIndex=chageIndex
      this.load()
    },
    handleSelectionChange(val){
    this.multipleSelection=val
  },
  async load(){
    const res=await loadMEssage(this.pageIndex,this.pageSize)
    console.log(res);
    this.tableData=res.data.FindValue
    this.total=res.data.total
  },
  handleSuccess(){
    this.$message.success("文件上传成功")
  },
  handledownLoad(url){
    window.open(url)
  },
  async search(){
    const res=await loadsearch(this.pageIndex,this.pageSize,this.filename,this.type)
    this.tableData=res.data.FindValue
    this.total=res.data.total
    this.filename=""
    this.type=""
  },
  reset(){
    this.filename=""
    this.type=""
    this.load()
  }
  }
}
</script>

<style>

</style>